.page-order-detail {
	background: #f9f9f9;
	.status-process {
		padding: 20px;
		border-top: 2px solid #e1251b;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		display: flex;
		background: #fff;
		.status-box {
			padding: 20px 30px 20px 20px;
			text-align: center;
			position: relative;
			border-right: 1px solid #f5f5f5;
			.order-number {
				width: 190px;
				color: #999;
			}
			.status {
				font-size: 18px;
				padding: 25px 0 20px;
				font-weight: 600;
				color: #e1251b;
			}
			.description {
				color: #999;
			}
			.action {
				margin-top: 30px;
				.action-a.red {
					margin-right: 20px;
					color: #e1251b;
				}
				.action-a.btn {
					background: #f5f5f5;
					height: 18px;
					line-height: 18px;
					border: 1px solid #ddd;
					padding: 4px 15px;
					&:hover {
						color: #e1251b;
						border-color: #e1251b;
						background: #fff;
					}
				}
				.action-a {
					&:hover {
						color: #e1251b;
					}
				}
			}
		}
		.invoice-detail {
			width: 99px;
			height: 24px;
			background: #F9F9F9;
			border: 1px solid #DCDCDC;
			line-height: 24px;
			text-align: center;
			color: #333333;
			font-size: 12px;
			border-radius: 2px;
			cursor: pointer;
			padding: 0 2px;
			margin: 5px auto;
		}
		.process-box {
			padding: 20px;
			margin-left: 20px;
			.tip {
				color: #999;
			}
			.process {
				display: flex;
				text-align: center;
			}
			.item {
				margin-right: 20px;
				padding-right: 110px;
				&:last-child {
					margin: 0;
					padding: 0;
					.img {
						&:after {
							width: 0;
						}
					}
				}
				.img {
					width: 30px;
					height: 30px;
					margin: 30px auto 25px;
					background: url(@/assets/images/icons.png) no-repeat;
					position: relative;
					&:after {
						position: absolute;
						top: 10px;
						right: -115px;
						display: block;
						content: ' ';
						width: 88px;
						height: 10px;
						background: url(@/assets/images/icons.png) no-repeat -175px -686px;
					}
				}
				.img.process01 {
					background-position: 0 -711px;
				}
				.img.process02 {
					background-position: -35px -676px;
				}
				.img.process03 {
					background-position: -70px -676px;
				}
				.img.process04 {
					background-position: -105px -676px;
				}
				.img.process05 {
					background-position: -140px -676px;
				}
				.text {
					margin-bottom: 10px;
					color: #999;
				}
				.time {
					color: #999;
					font-family: arial,sans-serif;
					width: 68px;
				}
			}
			.item.active {
				.img.process02 {
					background-position: -35px -711px;
				}
				.img.process03 {
					background-position: -70px -711px;
				}
				.img.process04 {
					background-position: -105px -711px;
				}
				.img.process05 {
					background-position: -140px -711px;
				}
				.img {
					&:after {
						background-position: -175px -721px;
					}
				}
				.text {
					color: #000;
				}
			}
		}
	}
	.delivery-box {
		margin-top: 30px;
		.box-tab {
			display: flex;
			align-items: center;
			margin-left: -1px;
			overflow-x: auto;
			.item {
				position: relative;
				padding: 9px 25px;
				cursor: pointer;
				white-space: nowrap;
			}
			.item.active {
				background: #fff;
				color: #000;
				font-weight: 600;
				border-radius: 2px 2px 0 0;
				border: 1px solid #f2f2f2;
				border-bottom: 0;
			}
		}
		.box-con {
			padding: 20px;
			background: #fff;
			display: flex;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
			.deliver-msg {
				width: 460px;
				.d-item {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					.text {
						width: 80px;
					}
					.res {
						word-break: break-word;
						max-width: 370px;
					}
				}
				.d-goods {
					position: relative;
					width: 340px;
					margin: 30px 0 0;
					.arrow {
						position: absolute;
						top: 28px;
						width: 22px;
						height: 22px;
						background: #eee;
						border-radius: 50%;
						cursor: pointer;
						display: none;
						&::before {
							position: absolute;
							left: 9px;
							top: 8px;
							display: block;
							width: 5px;
							height: 5px;
							content: ' ';
							font-size: 0;
              border-width: 1px 1px 0 0;
              border-style: solid;
              border-color: #666;
							transform: rotate(225deg);
						}
					}
					.arrow.disable {
						opacity: 0.5;
						cursor: not-allowed;
					}
					.arrow.prev {
						left: -32px;
					}
					.arrow.next {
						right: -32px;
						transform: rotate(180deg);
					}
					.item-goods {
						position: relative;
						width: 340px;
						height: 80px;
						overflow: hidden;
					}
					.goods-box {
						position: absolute;
						left: 0;
						display: flex;
						margin-top: 0;
						-webkit-transition: all 0.3s;
						-moz-transition: all 0.3s;
						transition: all 0.3s;
						.item {
							margin-right: 10px;
							font-size: 12px;
							cursor: pointer;
							&:last-child {
								margin: 0;
							}
							.img {
								width: 60px;
								height: 60px;
								font-size: 0;
								margin-bottom: 4px;
								position: relative;
								img {
									width: 100%;
									height: 100%;
								}
								.number {
									position: absolute;
									bottom: 0;
									right: 0;
									background: rgba(0, 0, 0, 0.3);
									color: #fff;
									border-radius: 6px 0 6px 0;
									font-size: 12px;
									height: 16px;
									line-height: 16px;
									padding: 0 5px;
								}
							}
							.name {
								width: 60px;
								height: 16px;
								line-height: 16px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #999;
							}
						}
					}
				}
				.d-goods.over {
					margin: 30px 32px 0;
					.arrow {
						display: block;
					}
				}
			}
			.logistics {
				flex: 1;
				.l-tit {
					display: flex;
					margin-bottom: 10px;
					.l-state {
						color: #c00;
					}
				}
				.logistics-box {
					height: 175px;
					overflow-y: scroll;
					position: relative;
					margin-top: 5px;
					&::before {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						width: 12px;
						height: 12px;
						content: ' ';
						font-size: 0;
						background: #fff;
						z-index: 1;
					}
					&::after {
						position: absolute;
						left: 6px;
						top: 0;
						display: block;
						height: 100%;
						content: ' ';
						font-size: 0;
						background: #eee;
						z-index: 0;
					}
					.item {
						padding: 0 0 40px 25px;
						position: relative;
						margin-left: 6px;
						border-left: 1px solid #eee;
						&::before {
							width: 5px;
							height: 5px;
							border: 3px solid #fff;
							position: absolute;
							left: -6px;
							top: 0;
							display: block;
							border-radius: 50%;
							content: " ";
							font-size: 0;
							background: #ccc;
							z-index: 2;
						}
						&:first-child {
							&:before {
								background: #e1251b;
								border-color: #fed1d4;
							}
						}
						.time {
							color: #999;
						}
						.text {
							margin-top: 5px;
							max-width: 590px;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
	.left-line {
		border-left: 1px solid #fff !important;
	}
	.order-info {
		margin-top: 30px;
		padding: 20px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		display: flex;
		background: #fff;
		.item {
			width: 25%;
			border-left: 1px solid #f5f5f5;
			line-height: 20px;
			padding: 0 30px;
			&:first-child {
				padding-left: 10px;
				border: 0;
			}
			.tit {
				font-weight: 600;
				margin-bottom: 10px;
			}
			.con {
				padding-top: 10px;
			}
			.con-item {
				margin-top: 8px;
				display: flex;
				.item-tit {
					width: 70px;
					color: #999;
					word-wrap: break-word;
					word-break: break-word;
				}
				.item-con {
					flex: 1;
					font-family: arial,sans-serif;
					width: 100%;
					word-break: break-word;
				}
			}
		}
		.item.virtual-goods-code {
			.item-tit {
				display: inline-block;
			}
			.con-item {
				&:first-child {
					margin-top: 0;
				}
				.used {
					.code {
						text-decoration: line-through;
						color: #999;
					}
					.grey {
						color: #999;
						font-size: 12px;
					}
				}
				.item-tit {
					width: auto;
				}
			}
			.con {
				max-height: 220px;
				overflow-y: auto;
				padding-right: 10px;
			}
		}
		.item.all-msg {
			.con {
				max-height: 220px;
				overflow-y: auto;
				padding-right: 10px;
			}
			.con-item {
				.item-tit {
					min-width: 70px;
				}
				.msg-con {
					margin-left: 10px;
					word-wrap: break-word;
					word-break: break-word;
				}
			}
		}
	}
	.goods-box {
		margin-top: 30px;
		.shop {
			height: 14px;
			line-height: 14px;
			padding: 0 10px 0;
			margin-bottom: 15px;
			.shop-icon {
				display: inline-block;
				vertical-align: top;
				width: 14px;
				height: 14px;
				margin-right: 3px;
				background: url(@/assets/images/icons.png) no-repeat -28px -458px;
			}
			&:hover {
				.shop-icon {
					background-position: -9px -458px;
				}
			}
			.name {
				display: inline-block;
				vertical-align: top;
				font-weight: bold;
				color: #333333;
			}
		}
		.goods-con {
			background: #fff;
			padding: 25px 20px 15px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		}
		.order-table {
			margin-bottom: 20px;
			.box {
				width: 100%;
				text-align: center;
			}
			.box-tit {
				th {
					background: #f9f9f9;
					height: 32px;
					line-height: 32px;
					text-align: center;
					font-weight: 400;
					border: 1px solid #f9f9f9;
				}
				.tal {
					text-align: left;
				}
			}
			.box-tr {
				td {
					padding: 15px 0;
					border-bottom: 1px solid #eee;
					text-align: center;
				}
				.goods-info {
					width: 450px;
					padding-left: 15px;
					text-align: left;
					display: flex;
					.img {
						width: 60px;
						height: 60px;
						font-size: 0;
						margin-right: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.name-sku {
						flex: 1;
						max-width: 300px;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						.name {
							max-height: 36px;
							line-height: 18px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							word-break: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							&:hover {
								color: #e1251b;
							}
						}
						.sku {
							.gift-icon {
								display: inline-block;
								font-size: 12px;
								color: #fff;
								background: #e43130;
								padding: 3px;
								border-radius: 3px;
								box-sizing: border-box;
								margin-right: 5px;
								line-height: 1em;
							}
							display: block;
							line-height: 18px;
							margin-top: 6px;
							word-break: break-word;
							color: #999;
						}
					}
				}
				.goods-number {
					font-family: arial,sans-serif;
					text-align: left;
				}
				.price {
					font-family: verdana,sans-serif;
					color: #000;
					justify-content: center;
				}
				.action-btn {
					display: block;
					border-radius: 2px;
					width: 85px;
					height: 18px;
					line-height: 18px;
					padding: 2px 0;
					margin: 12px auto;
					text-align: center;
					background: #fff;
					color: #e1251b;
					border: 1px solid #e1251b;
					&:first-child {
						margin-top: 0;
					}
					&:last-child {
						margin-bottom: 0;
					}
					&:hover {
						background: #e1251b;
						color: #fff;
					}
				}
			}
		}
		.goods-total {
			background: #fff;
			padding-right: 10px;
			text-align: right;
			.item {
				margin-bottom: 10px;
				.price.gray {
					color: #999;
				}
				.tit {
					display: inline-block;
					vertical-align: top;
					line-height: 20px;
				}
				.price {
					display: inline-block;
					vertical-align: top;
					line-height: 20px;
					min-width: 105px;
					color: #000;
					font-family: verdana,sans-serif;
					:deep(.el-icon){
						top: 1.5px;
					}
				}
				.price.big {
					color: #e1251b;
					font-size: 16px;
					font-weight: 600;
				}
			}
		}
	}
  .total-return {
    text-align: right;
    margin-top: 20px;
    .action-btn {
      display: inline-block;
      color: #e1251b;
      border: 1px solid #e1251b;
      width: 85px;
      height: 18px;
      line-height: 18px;
      padding: 2px 0;
      text-align: center;
      &:hover {
        background: #e1251b;
        color: #fff;
      }
    }
  }
  .gift-info {
    .gift-item {
      text-align: left;
      margin-top: 5px;
      color: #333;
      cursor: pointer;
      &:hover {
        color: #e1251b;
      }
      .name {
        display: inline-block;
        vertical-align: middle;
        max-width: 500px;
        margin-right: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .num {
        display: inline-block;
        vertical-align: middle;
        color: #999;
      }
    }
  }
  .en-width {
    width:120px !important;
  }
}
.order-detail-en {
	.status-process {
		.process-box {
			.item {
				padding-right: 80px;
			}
		}
	}
	.order-info {
		.item {
			.con-item {
				.item-tit {
					width: 120px;
					color: #999;
				}
			}
		}
	}
	.goods-box {
		.order-table {
			.box-tr {
				.action-btn {
					width: 120px;
				}
			}
		}
	}
	.total-return {
		.action-btn {
			width: 150px;
		}
	}
}
